/* margin padding width height border border-radius */

/** margin和padding上下左右 5-80px 间隔为5px */
@mixin mlGenerator($value) {
  .ml#{$value} {
    margin-left: $value * 1px !important;
  }
}

@mixin mtGenerator($value) {
  .mt#{$value} {
    margin-top: $value * 1px !important;
  }
}

@mixin mbGenerator($value) {
  .mb#{$value} {
    margin-bottom: $value * 1px !important;
  }
}

@mixin mrGenerator($value) {
  .mr#{$value} {
    margin-right: $value * 1px !important;
  }
}

@mixin mGenerator($value) {
  .m#{$value} {
    margin: $value * 1px !important;
  }
}

@mixin plGenerator($value) {
  .pl#{$value} {
    padding-left: $value * 1px !important;
  }
}

@mixin ptGenerator($value) {
  .pt#{$value} {
    padding-top: $value * 1px !important;
  }
}

@mixin pbGenerator($value) {
  .pb#{$value} {
    padding-bottom: $value * 1px !important;
  }
}

@mixin prGenerator($value) {
  .pr#{$value} {
    padding-right: $value * 1px !important;
  }
}

@mixin pGenerator($value) {
  .p#{$value} {
    padding: $value * 1px !important;
  }
}

// 0-80px 间隔5px
$i: 80;

@while $i >= 0 {
  @include mlGenerator($i);
  @include mtGenerator($i);
  @include mbGenerator($i);
  @include mrGenerator($i);
  @include mGenerator($i);
  @include plGenerator($i);
  @include ptGenerator($i);
  @include pbGenerator($i);
  @include prGenerator($i);
  @include pGenerator($i);
  $i: $i - 5;
}

@include mlGenerator(90);
@include plGenerator(100);
@include plGenerator(13);
@include plGenerator(23);

/** margin padding值 结束 ~~~~~end~~~~~ */

/* width px值 */
@mixin wGenerator($value) {
  .w#{$value} {
    width: $value * 1px !important;
  }
}
//200px宽度 -> 示例：@include wGenerator(200);
@include wGenerator(62); //62px
@include wGenerator(80);
@include wGenerator(90);
@include wGenerator(96);
@include wGenerator(100);//100px
@include wGenerator(105);
@include wGenerator(112);
@include wGenerator(120);
@include wGenerator(130);
@include wGenerator(180); //180px
@include wGenerator(200);
@include wGenerator(240);
@include wGenerator(330);

/* width px值 结束 ————————end———————————— */

/* width % 百分比 值 */
@mixin wpGenerator($value) {
  .wp#{$value} {
    width: $value * 1% !important;
  }
}
// 5%-100%,间隔5%的所有值 注意：只能传整数
$i: 100;

@while $i > 0 {
  @include wpGenerator($i);
  $i: $i - 5;
}

.wp33 {
  width: 33.3% !important;
}

// 单个值 写这
// @include wpGenerator(5);

/* width 百分比 值 结束 ————————end———————————— */

//其他
//height
.hp100 {
  height: 100%;
}

.h20 {
  height: 20px;
}
// border

.border-radius-10 {
  border-radius: 10px;
}

.border-radius-6 {
  border-radius: 6px;
}

.border-radius-4 {
  border-radius: 4px;
}
